HTML
Drew Green
Tutorial 1 - The basics
So, ya want to learn HTML, eh? Well, be prepared, because whilst HTML is not considered a programming language, it's certainly as complicated as one. But don't let this put you off, because it's not hard to learn. To master it, on the other hand, is.
This tutorial series is meant as a helpful guide for those who are starting out in the big baaad world of web-page construction. Over the next few tutorials you will learn how to create a basic web page with links, tables, images etc. It won't be a masterpiece, certainly, (because that's for you to achieve) but it will be an organised, clean, and well presented creation, which (most importantly) has been created by YOU.
This month, I will explain what HTML is, and demonstrate how to write a very simple page (hey, everyone's got to start somewhere!)
What is HTML?
Ever browsed the Internet? Of course you have, otherwise you wouldn't have found WOA, would you? Ever wondered how those pages of 'text and pictures' were made? Well, those 'pages' are made of HTML, or HyperText Markup Language. HTML is used to "mark-up" a load of text using 'tags' - simple commands surrounded by a "<" at the beginning, and a ">" at the end. These tags make the document look better in a browser, almost like a Word- processed document, complete with colours and different sized fonts
.Images or sound can also be added to web pages, and this is all possible thanks to HTML.
HTML may sound pretty bo-ring, because no-one wants to look at pages of text and pictures - 'it sounds dull'. Ah, my misinformed junior. You could not be more wrong. HTML allows you to do more than just text and pictures. In fact, the possibilities are (almost) endless.
HTML was originally planned only to structure a document, i.e. tell paragraphs where to begin and end, but it has now grown and included design techniques, and generally produce super-spangly-type documents.
What Do I Need to Make Web Pages?
While there are many programs available for HTML 'coding', you need nothing more than an ASCII text editor, say 'Ed', which came with WorkBench 3 and above (to my knowledge) obviously Ed isn't the friendliest of programs, but it's free(ish)... Word processors are not a good option for creating HTML documents unless they have the option to save as an ASCII file. Even so, don't use them, because you may find yourself tempted to use the program's built-in features, such as centering text, or making it bold etc.
When you are finished typing up your file, save it with a .htm or .html file extension - for example "index.html" (I prefer the longer version) Once you have done this, you can open the file in your browser to see what it looks like. Now, on with the tutorial.
Your first HTML file
Don't expect to delve into HTML straight away. And don't expect to become a Guru overnight either, because you won't. Instead, I will introduce the various tags in dribbles, rather than just dumping loads of them on you in one go. Shall I begin? I think so.
As I have already explained, a tag starts with the "<" sign, and ends with a ">" sign. Between these, you place text which identifies what tag you are using, and customises that tag for your needs. The tags themselves are not displayed in the browser along with normal text, and are not case sensitive, so you can have lowercase tags, uppercase tags, or a mixture of both - it doesn't matter one bit. Uppercase tags are easier to distinguish from the rest of the document, however.
An example of a tag is <HTML>, which marks the start of the html document. the <HTML> tag is a 'container'. A container is made up of a start tag and an end tag. Whatever appears within the two tags that can be affected, is affected in whatever way the tag is designed to affect it (!).
For example:
all the text between two tags could be turned red. However, images and the
like will not be turned red, because they cannot be altered by such a tag.
An end tag is identical to the start tag, except that between the "<" and the first letter of the tag name appears a "/". For example, I said that <HTML> marks the beginning of a html document. The corresponding end tag is </HTML>. Whatever is contained between the tags is considered part of the html document.
Losing your <HEAD>?
<HEAD> tags signify the start and end of the heading of a html document. Although this is not a necessary element of html documents, it can, and usually does increase the effectiveness of them. <HEAD> is also a container, and within it, it contains many other tags. The most commonly used element of the <HEAD> tag is <TITLE>. This provides your page with a title, which appears on the title bar of the browser window.
The <TITLE> tag is, however, quite easy to use. Here is an example of a simple html document using all the tags we have discussed so far (yes, all three!)
<META> tags (sorry, couldn't think of anything!)
Meta tags are also placed in the head of a html document. These tags contain information about your site. They aren't necessary, but some search engines use them so they can understand a little about your site.
Each piece of information is contained in a seperate tag. The two you should include if you are using meta tags are for keywords and description:
<META NAME=keywords CONTENT="wild west, desert, cactus, Clint Eastwood">
<META NAME=description CONTENT = "Saddle up and ride through my site, discovering everything there is to know about the Wild West. YeeeHaa!">
As you can see, the keywords example contains more than one keyword within the CONTENT= part. You can add as many keywords as you want here, as long as they are relevant to what your site is about. Each keyword should be seperated by a comma. In the example, there are four keywords.
Meta tags should be used anywhere within the <HEAD> and </HEAD> tags.
Good for your <BODY>The <BODY> </BODY> tags, surprisingly, signify the main body of the html document. After the <BODY> tag and before the </BODY> tag, you enter all of your text, pictures, and anything else you want on your page. To enter text, just type away! But to format this text/insert images and the rest, you will have to learn different tags and codes.
There are many attributes to start the body tag, they won't be listed until the next tutorial in WOA5.
Secret text (oooo!)
It is possible to add text to html documents that does not affect the
presentation or anything else that the user sees. To do this, simply
encompass the text to be hidden with these tags:
If that were in a real html document, the 'and' in between would not be visible (as well as the tags) straight away. Do not assume however that no one will be able to see this, because by "viewing the source", a function available in most browsers, it is possible to see all of the html code. Not only text, but html tags/code can be hidden by using the above tags. This could come in handy if you wanted to hide a part of your page until a further date. When that day comes, all you need to do is delete the "<!--" and "-->", and the section which was held between will now be included in the visible portion of the page:
<HTML>
<HEAD>
<TITLE>
'ello all!
</TITLE>
</HEAD>
<BODY>
I made this page today.
<!-- Unless you are viewing this tomorrow, in which case, I made it
yesterday :-) -->
</BODY>
The next day you can remove the hidden text tags, and all will be made
clear! (or not...)
Multiple spacing
Unfortunately, multiple spacing does not exist in the world of web page
design, because browsers interpret multiple spaces as one single space.
This can make it really annoying to place your text where you want it.
The next tutorial (WOA5) is about arranging your text the way you want, and
adding colour to your otherwise uninteresting (at the moment ;) web pages.
See you then!
Well, that concludes the lesson for today, O faithful students. However, don't despair, because I have a special treat for you. This next section is an example web page, created using the techniques described today. It can be thought of as a 'template' for future pages.
<HTML>
<HEAD>
<META NAME=keywords CONTENT="practice, web, page, html">
<META NAME=description CONTENT="This is the page I will use to practice my
HTML skills">
<TITLE>I have now completed the first tutorial</TITLE>
</HEAD>
<BODY>
I have now finished the first WOA HTML tutorial. I now know the very
basics of writing HTML. I know that the start and end HTML tags are
necessary in a HTML document. I know that META tags are used to describe
my page to search engines, such as keywords and description. I am able to
give my documents a title, and I understand that all text and images etc.
should be included between the start and end BODY tags. Finally, I know
that you can hide text within a html document. For example, there is
hidden <!--this text is hidden so you can't see it on the page!-->
text between the words "hidden" and "text" in this last sentence.
</BODY>
</HTML>
Until next time, my loyal followers, may the HTML be with you.